<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../js/layui/css/layui.css"/>
    <script src="../js/layui/layui.js"></script>
    <script src="../js/jquery/jquery-1.9.1.js"></script>
</head>
<body>

<div>
    <!--内容的展示-->
    <table id="date" lay-filter="test" ></table>

</div>
</body>
<script>
    var table = null;
        layui.use(['table','layer','form','element'], function() {
            table = layui.table;
            var element = layui.element;
            var layer = layui.layer;
            var form = layui.form;
            $(function () {
                var tableList = table.render({
                    elem: '#date',
                    fit: true,
                    cellMinWidth: true, //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                    url: '../web/queryProductcjq', //数据接口
                    type: "POST",
                    loading: false,
                    /* page: true,//开启分页
                limits: [1,5,30,40,50,60,70,80,90],//page 代表当前页码、limit 代表每页数据量*/
                    cols: [
                        [ //表头
                            {field: 'id', type: 'checkbox', fixed: 'left'},
                            {field: 'account', title: '用户名', align: 'center', sort: true},
                            {field: 'truename', title: '真实姓名', align: 'center', sort: true},
                            {field: 'roendate', title: '出生日期', align: 'center', sort: true},
                            {field: 'startworkdate', title: '开始工作年份', align: 'center', sort: true},
                            {
                                field: 'sex', title: '性别', align: 'center', sort: true, templet: function (data) {
                                    return data.sex == 1 ? "男" : (data.sex == 2 ? "女" : "");
                                }
                            },
                            {field: 'address', title: '地址', align: 'center', sort: true},
                            {
                                field: 'haiwai', title: '海外经历', align: 'center', sort: true, templet: function (data) {
                                    return data.sex == 1 ? "是" : (data.sex == 2 ? "否" : "");
                                }
                            },
                            {field: 'gouzuo', title: '工作经验', align: 'center', sort: true},
                            {field: 'caozuo', title: '操作', align: 'center', sort: true, toolbar: '#toolbar'}
                            //{fixed: 'caozuo', title: '操作', align: 'center', sort: true, toolbar: '#toolbar'}
                            //fixed加上这个 左右两边都有 这个属性
                        ]
                    ]
                });
                table.on('tool(test)', function (obj) {
                    var data = obj.data;
                    if (obj.event == 'edit') {
                        openEditProductDialog(data.id);
                    }
                })
            })
        })
    function  openEditProductDialog(id) {
        layer.open({
            type: 2,
            title: '详细内容',
            area: ['700px', '500px'],
            fixed: false, //不固定
            maxmin: true,
            content: '../page/toUserXiangXi',
            //btn: ['保存'],
            /*success: function (layero, index) {
                $.ajax({
                    url: '../web/findQueryUserList',
                    data: {id: id},
                    dataType: 'json',
                    type: 'post',
                    success: function (data) {
                        var iframeWin = window[layero.find("iframe")[0]["name"]];
                        iframeWin.initForm(data);
                    }
                })
            }*/
        })




    }
</script>
<script type="text/html" id="toolbar">
    <a class="layui-btn layui-btn-xs" lay-event="edit">查看详情</a>
</script>


</html>